var __cs = [
	{
		name: 'Input',
		template:`
		<div :class="wrapClasses">
	        <template v-if="type !== 'textarea'">
	            <input
	            	v-if="(type == 'text') || (type == 'number') || (type == 'password') || (type == 'date')"
	            	ref="input"
	                :id="elementId"
	                :type="currentType"
	                :class="inputClasses"
	                :placeholder="placeholder"
	                :disabled="itemDisabled"
	                :maxlength="maxlength"
	                :name="name"
	                :value="currentValue"
	                :number="number"
	                :min="minVal" 
	                @keyup.enter="handleEnter"
	                @keyup="handleKeyup"
	                @keypress="handleKeypress"
	                @keydown="handleKeydown"
	                @focus="handleFocus"
	                @blur="handleBlur"
	                @compositionstart="handleComposition"
	                @compositionupdate="handleComposition"
	                @compositionend="handleComposition"
	                @input="handleInput"
	                @change="handleChange">
	            <select v-if="type == 'select'" :class="inputClasses" v-model="currentValue">
	            	<option value="" ></option>
	            	<option :value="v.v" v-for="(v,k) in options" v-text="v.k">启用</option>
	            </select>
	            <div class="pa t0 b0 r0 w30 flex alc center trs2 opa8 hovopa1" :class="currentType" v-if="type == 'password'" @click="showPassword = !showPassword">
	            	<i class="fa fa-eye-slash" v-if="currentType == 'password'"></i>
	            	<i class="fa fa-eye" v-else></i>
	            </div>
	        </template>
	        <template v-else>
	            <textarea
	            	ref="textarea"
	                :id="elementId"
	                :class="textClasses"
	                :style="style"
	                :placeholder="placeholder"
	                :disabled="itemDisabled"
	                :name="name"
	                :value="currentValue"
	                @keyup.enter="handleEnter"
	                @input="handleInput">
	            </textarea>
	        </template>
	    </div>
		`,
		props: {
            type: { type: String, default: 'text' },
            value: { type: [String, Number],default: ''},
            class: {type: String, default: '' },
            iclass: {type: String, default: '' },
            style: {type: String, default: '' },
            placeholder: { type: String, default: '' },
            maxlength: { type: [String, Number] },
            disabled: { type: Boolean, default: false},
            icon: String,
            name: { type: String},
            number: { type: Boolean, default: false},
            min: { type: Number},
            elementId: { type: String},
            opt: { type: Object, default: {}},
        },
        data () {
            return {
            	itemDisabled: false,
                currentValue: this.value,
                prefixCls: 'w-input',
                slotReady: false,
                textareaStyles: {},
                isOnComposition: false,
                showPassword: false,
                options:[],
                minVal:'',
            };
        },
        mounted () {
        	let v = this;
        	if (v.opt && v.opt.options && v.opt.options.length) {
        		let l = v.opt.options;
        		v.options = __copy(l);
        	}
        	if (v.opt) {
        		if (v.opt.options && v.opt.options.length) {
	        		let l = v.opt.options;
	        		v.options = __copy(l);
	        	}
        		if (v.opt.minVal != undefined) {
        			v.minVal = v.opt.minVal;
        		}
        	}
        	if (v.min) v.minVal = v.min;
        },
        computed: {
            currentType () {
                let type = this.type;
                if (type === 'password' && this.showPassword) type = 'text';
                return type;
            },
            wrapClasses () { return ['bbx pr flex',this.class];},
            inputClasses () { return ['bd1i','hbdci','br2','wh100','bbx','pd05','pr',this.iclass]; },
            textClasses () { return ['bd1i','hbdci','br2','pd05 pdtb5 lh20 bbx w100 h60','pr',this.iclass]; },
        },
        methods: {
            handleEnter (event) { this.$emit('enter', event); },
            handleKeydown (event) { this.$emit('keydown', event);},
            handleKeypress(event) { this.$emit('keypress', event); },
            handleKeyup (event) {  this.$emit('keyup', event); },
            handleFocus (event) { this.$emit('focus', event);  },
            handleBlur (event) {  this.$emit('blur', event);  },
            handleComposition(event) {
                if (event.type === 'compositionstart') {  this.isOnComposition = true; }
                if (event.type === 'compositionend') {
                    this.isOnComposition = false;
                    this.handleInput(event);
                }
            },
            handleInput (event) {
                if (this.isOnComposition) return;
                let value = event.target.value;
                if (this.number && value !== '') value = Number.isNaN(Number(value)) ? value : Number(value);
                this.$emit('input', value);
                this.setCurrentValue(value);
                this.$emit('change', event);
            },
            handleChange (event) { this.$emit('change', event);},
            setCurrentValue (value) {
                if (value === this.currentValue) return;
                this.currentValue = value;
            },
        },
        watch: {
            value (val) {
                this.setCurrentValue(val);
            }
        }
	},
]

if (!window.widgets) window.widgets = [];
for (let n in __cs) window.widgets.push(__cs[n]);